构造函数

一、内容提要

​ 我们之前学了js中对象的基础知识。比如如何创建一个对象，如何操作对象的属性，如何遍历一个对象的属性。而这些仅仅是作为js面向对象编程的皮毛。面对越来越复杂的前端应用。我们需要跟多，更高阶的知识内容。本节我们将学习创建对象最为重要的一种方式，构造函数方式。

本节我们将学习:

  1. 学习创建和使用构造函数

  2. 构造函数和其他函数的区别

  3. 那些我们用过的js自带构造函数

    ​

二、前提技术

​ 熟悉js基本语法、函数基础、js对象基础

三、内容详解

1.学习创建和使用构造函数

​ 在学习了解一个新事物前，我想我们应该搞清。如果我知道一条到达终点路，你突然跳出来说，走另一条路也能到终点。你觉得你不能说出这条路有什么优势，我会去走么。我希望每一个人学习构造函数前，先搞清为什么学习它。构造函数作为一种用创建对象的函数。相比较我们已经掌握的简单直接的字面量方式有什么优势呢？

//使用new + 构造函数来执行构造函数，可以创建一个对象
var obj1 = new Object();
var obj2 = {};

​ 以上我们使用new + Object() 创建了一个空对象（Object 作为js自带构造函数，用于创建一个最基本的空对象）。看起来并没有比字面方式高大上。反而更麻烦。那么我们来自定义一个构造函数，来详细了解下：

//创建Person 构造函数 用于创建人对象 注意js约定构造函数首字母大写
function Person(name, age){
      this.name = name;
      this.age = age;
      this.say = function(){
          //输入个人信息
          console.log("我叫" + this.name + " 我" + this.age +"岁了！");
      };
}

//使用构造函数创建一个对象
var person = new Person("tom", 28);
//访问并执行对象自我介绍函数
person.say();

​ 以上我们为创建人这种对象，先创建了一个构造函数，然后使用new Person("tom", 28)创建了一个叫tom的28岁的人对象，到程序中，可能一会说，费这么多事字面量也完全能搞定。

//字面量方式创建perosn对象
var person = {
      name: "tom",
      age: 28,
      say : function(){
          //输入个人信息
          console.log("我叫" + this.name + " 我" + this.age +"岁了！");
      }
};

​ 以上创建一个person对象确实看不出来构造函数的价值, 那么我没来看看构造函数的主要作用。构造函数用于批量创建同类对象。"批量"的含义是构造函数从来不是为了创建某一个对象存在的，而是为了创建多个。而"同类"表示构造函数创建出的对象具备共同的属性结构。

//创建张三
var p1 = new Person("张三", 30);
//创建李四
var p2 = new Person("李四", 9);

​ new + 构造函数可以快速创建出一个复杂对象，只需要将对象之间的差异化的属性值以参数形式传入即可。

2. 构造函数和其他函数的区别

​ 构造函数本质上还是一个函数。那么构造函数和普通函数有哪些区别呢？ 我们通过观察Person函数的语法和使用方式，可以得到典型的四个差异。

  • 构造函数名称首字母大写

  • ​构造函数内使用this初始化新对象的属性

  • 构造函数不使用return 返回内容

  • 构造函数执行需要配合new关键字

    ​

3. 那些我们用过的js自带构造函数

​ 学习到这你是否已经发现，似乎之前我们学习js基础时候就已经见过这种构造函数呢。当初我们创建时间对象使用的Date，还有那些基本数据类型的包装函数String、Array。

//创建日期对象
var date = new Date();
//创建一个字符串对象
var str = new String();
//创建一个数组实例
var array = new Array();

​ 原来我们之前用过这种首字母大写，需要配合new使用的函数就是典型的构造函数。原来执行构造函数创建出来的就是对象。此处我们对以上变量赋值进行拆分理解。

//new + 构造函数在内存中创建出来一个对象 至于对象怎么用，和创建过程无关
console.log(new Date()); //对象虽未赋值给变量但已经创建完毕
var date;
console.log(data); // 为报错而是输出undefined 表明变量已经创建完成只是值为undefined
/*而我们再次观察上个案例中的代码, 一行语句实际是完成了创建时间对象， 创建变量， 将对象赋值给变量三个步骤*/
var date = new Date();

四、总结

1.构造函数：是一种用来批量创建同类对象的函数。

2.构造函数和普通函数的区别：

  • 构造函数名称首字母大写

  • 构造函数内使用this初始化新对象的属性

  • 构造函数不使用return 返回内容

  • 构造函数执行需要配合new关键字

    ​

五、开发环境

chrome 浏览器version：52+、sublime3

results matching ""

    No results matching ""